.pagination {
  justify-content: center;

  .page-link {
    background-color: variable('surface');
    border-color: variable('secondary-text-on-surface');
    color: variable('secondary-text-on-surface');
  }

  .page-item {
    .page-link {
      border-color: variable('secondary-text-on-surface');

      &:focus {
        box-shadow: none;
      }
    }

    &.active {
      .page-link {
        background-color: variable('primary');
      }
    }

    &.disabled {
      .page-link {
        color: variable('disabled-text-on-surface');
        background-color: variable('surface');
      }
    }
  }
}
